<template>
    <el-form ref="formprovince" :model="localForm" label-width="120px" size="small">
        <el-form-item label="市级代理分佣" prop="city" required>
            <el-input
                v-model="localForm.city"
                :controls="false"
                class="ls-input"
                placeholder="市级代理分佣比"
                :disabled="$attrs.disabled"
            >
                <template slot="append">%</template>
            </el-input>
            <span class="desc">按照用户购买所在地区进行分拥</span>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
//
import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'

import { PageMode } from '@/utils/type'

// import LsDialog from '@/components/ls-dialog.vue'

@Component({
    components: {}
})
export default class distribution_identity_province extends Vue {
    @Prop({
        default() {
            return {}
        }
    })
    benefit!: any

    @Prop({ default: PageMode.ADD }) mode!: string

    form: any = {
        city: ''
    }

    localForm: any = {
        city: ''
    }

    @Watch('localForm', { immediate: true, deep: true })
    onLocalFormOnChange() {
        this.emitEvents()
    }

    disabled = false

    created() {
        this.init()
    }

    /** S methods */
    init() {
        this.localForm.city = this.benefit.city
    }
    emitEvents() {
        this.$emit('update:benefit', {
            city: this.localForm.city
        })
    }
    /** E methods */
}
</script>

<style lang="scss" scoped>
.desc {
    color: #999;
    display: block;
}
</style>
